import { Box, Typography } from '@mui/material';
import { Empty } from 'antd';
import { useEffect, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { CMEVENTS } from '@amcax/base';
import '../InputPanel/closeButton.scss';
import { userEvents } from '../../../../../../module';

export default function ResultPanel() {
  const width = 500;
  // let task_result = null;
  const [color, setColor] = useState<string>('#ffff00');
  const [task_result, setTaskRes] = useState(null);

  useEffect(() => {
    const task_res = localStorage.getItem('task_result');
    if (task_res) {
      setTaskRes(JSON.parse(task_res));
    }
    const resColor = localStorage.getItem('color');
    if (resColor) {
      setColor(resColor);
    }
  }, []);

  const getOption = () => {
    if (!task_result) return null;

    const reynolds_number = task_result[0].reynolds_number;
    const data = task_result[0].result.map((item) => ({
      value: [item.cd, item.cl],
      alpha: item.alpha,
    })) as any[];
    const alphaMap = data.reduce((map, item) => {
      const key = `${item.value[0]},${item.value[1]}`;
      map[key] = item.alpha;
      return map;
    }, {});

    return {
      title: {
        text: 'Cl(Cd):',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const point = params[0];
          const key = `${point.value[0]},${point.value[1]}`;
          const alpha = alphaMap[key];
          return `
            ${point.marker} Re ${reynolds_number}<br/>
            alpha: ${alpha}<br/>
            Cd: ${point.value[0]}<br/>
            Cl: <b>${point.value[1]}<b/>
          `;
        },
      },
      legend: {
        data: [`Re ${reynolds_number}`],
        top: 30,
      },
      xAxis: {
        type: 'value',
        name: 'Cd',
        min: 0.0,
        max: 0.1,
      },
      yAxis: {
        type: 'value',
        name: 'Cl',
        min: -1.0,
        max: 1.5,
      },
      series: [
        {
          name: `Re ${reynolds_number}`,
          type: 'line',
          data: data.map((item) => item.value),
          lineStyle: {
            color: color,
          },
        },
      ],
      dataZoom: [
        {
          type: 'slider', // 滑动
          start: 0,
          end: 100,
        },
        {
          type: 'inside', // 滚轮缩放
          start: 0,
          end: 100,
        },
      ],
    };
  };

  return (
    <Box sx={{ p: '20px', width: width + 'px' }}>
      <div style={{ display: 'flex' }}>
        <Typography component='h4'>结果展示</Typography>
        <button
          style={{ marginLeft: 'auto' }}
          className='close-button'
          onClick={() => {
            userEvents.emit(CMEVENTS.RIGHT_NAV_ITEM_CLICK, {
              id: 'input',
            });
            userEvents.emit(CMEVENTS.WIDGET_RIGHT_NAV_SHOW, {
              show: false,
              id: 'input',
            });
          }}>
          ×
        </button>
      </div>
      {task_result ? (
        <Box
          sx={{
            mt: '10px',
            overflowY: 'auto',
            width: '100%',
            height: '100%',
          }}>
          <div style={{ marginTop: '40px' }}>
            <ReactEcharts
              option={getOption()}
              style={{ height: width + 'px', width: width + 'px' }}
            />
          </div>
        </Box>
      ) : (
        <Box
          sx={{
            mt: '20px',
            overflowY: 'auto',
            width: width + 'px',
            display: 'flex',
            justifyContent: 'center',
          }}>
          <Empty
            image={Empty.PRESENTED_IMAGE_SIMPLE}
            description='暂无数据'
          />
        </Box>
      )}
    </Box>
  );
}
